{% extends "sentry/projects/manage.html" %}

{% load i18n %}
{% load sentry_helpers %}
{% load sentry_plugins %}

{% block title %}{% trans "Issue Tracking" %} | {{ block.super }}{% endblock %}

{% block main %}
  <div class="ref-issue-tracking-settings">
    <h2>{% trans "Issue Tracking" %}</h2>

    <p>Enabling Issue Tracking will let you quickly create tasks within your existing tools.
      You'll find the new action under <span class="btn btn-default btn-sm">More <span class="icon icon-arrow-down"></span></span>
      on an issue's details page. Once you create an issue, you'll find a helpful annotation
      and link to the task in your project management tool. </p>

    {% if enabled_plugins or other_plugins %}
      {% for plugin, content in enabled_plugins %}
        <div class="box">
          <div class="box-header">
            {% if plugin.can_disable %}
              <form method="POST" class="pull-right">
                {% csrf_token %}
                <input type="hidden" name="plugin" value="{{ plugin.slug }}" />
                <button type="submit" class="btn btn-sm btn-default" name="op" value="disable">Disable</button>
              </form>
            {% endif %}
            <h3>{{ plugin.get_title }}</h3>
          </div>
          <div class="box-content with-padding">
            {{ content }}
          </div>
        </div>
      {% endfor %}

      <div id="issue_plugins"></div>

      {% if other_plugins %}
        <div class="box">
          <div class="box-header">
            <h3>{% trans "Inactive Integrations" %}</h3>
          </div>
          <div class="box-content with-padding">
            <ul class="integration-list">
              {% for plugin in other_plugins %}
                <li>
                  <form method="POST">
                    {% csrf_token %}
                    <input type="hidden" name="op" value="enable" />
                    <input type="hidden" name="plugin" value="{{ plugin.slug }}" />
                    <button type="submit">
                      <div class="icon-integration icon-{{ plugin.slug }}"></div>
                      {{ plugin.get_title }}
                    </button>
                  </form>
                </li>
              {% endfor %}
            </ul>
          </div>
        </div>
      {% endif %}
    {% else %}
      <div class="alert alert-info alert-block">
        <p>There are no issue tracker integrations available. Ask your Sentry team about integrating with your favorite project management tools.</p>
      </div>
    {% endif %}
  </div>

  <script>
  $(function(){
    ReactDOM.render(React.createFactory(Sentry.ProjectIssueTracking)({
      project: {% serialize project %},
      organization: {% serialize organization %},
      dataList: {% serialize issue_v2_plugins %}
    }), document.getElementById('issue_plugins'));
  });
  </script>
{% endblock %}
